<template>
  <div class="app-container">
    <div id="" class="header">
      <div id="" class="title_search">
        <el-input
          class="search_input"
          v-model="req_xin_xi.keyword"
          placeholder="搜索关键字"
          clearable
        ></el-input>
      </div>
      <div class="block">
        <el-date-picker
          :clearable="true"
          class="search_time"
          prefix-icon="1"
          v-model="time"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          @change="select_time"
        >
        </el-date-picker>
      </div>
      <el-select
        style="width: 150px"
        @change="change1"
        v-model="fuze_name"
        :filterable="true"
        clearable
        placeholder="搜索负责人"
        @focus="focus"
      >
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.real_name"
          :value="item.uid"
        >
        </el-option>
      </el-select>
      <el-select
      clearable
        style="width: 150px"
        @change="change2"
        v-model="peihe_name"
        :filterable="true"
        placeholder="搜索配合人"
        @focus="focus1"
      >
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.real_name"
          :value="item.uid"
        >
        </el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="search"
        >搜索</el-button
      >
      <el-button type="primary" icon="el-icon-refresh-right" @click="refresh"
        >刷新</el-button
      >
    </div>

    <el-table
      v-loading="table_loading"
      :data="rolesList"
      style="width: 100%; margin-top: 30px"
      border
    >
      <el-table-column align="center" label="id" width="50" prop="id">
      </el-table-column>
      <el-table-column align="center" label="公司名称" prop="company_name">
      </el-table-column>
      <el-table-column align="center" label="发票号" prop="invoice_num">
      </el-table-column>
      <el-table-column align="center" label="发票类型" prop="invoice_type">
      </el-table-column>
      <el-table-column align="center" label="发票金额" prop="price">
      </el-table-column>
      <el-table-column align="center" label="市场负责人" prop="market_person_uid_str">
      </el-table-column>
      <el-table-column align="center" label="发票创建人" prop="uid_str">
      </el-table-column>
      <el-table-column align="center" label="开票时间" prop="invoice_time_str">
      </el-table-column>
      <!-- <el-table-column align="center" label="操作" width="120">
        <template slot-scope="scope">
          <div id="cao_zuo" class="cao_zuo">
            <el-button type="success" size="mini" @click="handleEdit(scope)"
              >录入回款</el-button
            >
          </div>
        </template>
      </el-table-column> -->
    </el-table>
    <!-- 翻页组件 -->
    <div id="" class="pages">
      <el-pagination
        @size-change="size_change"
        background
        @current-change="current_change"
        :current-page="req_xin_xi.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="req_xin_xi.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      >
      </el-pagination>
    </div>
    <!-- 翻页组件 -->

    <el-dialog v-dialogDrag :visible.sync="dialogVisible" title="录入回款" center>
      <el-form
        ref="from"
        :rules="rules"
        :model="role"
        label-width="80px"
        label-position="right"
      >
        <el-form-item label="公司名称" prop="company_name">
          <el-input v-model="role.company_name"></el-input>
        </el-form-item>
        <el-form-item label="回款金额" prop="price">
          <el-input v-model="role.price" @input="price_input"></el-input>
          <span v-show="tishi_title" style="color: red"
            >金额大于提交金额了</span
          >
        </el-form-item>
        <el-form-item label="回款时间" prop="backmoney_time">
          <el-date-picker
            v-model="role.backmoney_time"
            value-format="yyyy-MM-dd HH:mm"
            format="yyyy-MM-dd HH:mm"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="回款单号" prop="company_num">
          <el-input v-model="role.company_num"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="role.remark" type='textarea' :rows='3'></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button @click="quxiao">取消</el-button>
        <el-tooltip
          class="item"
          effect="dark"
          content="挂接后的回款单无法修改，请仔细检查后提交,如要修改需要在结算单中取消挂接"
          placement="top"
        >
          <el-button type="primary" @click="confirmRole">提交</el-button>
        </el-tooltip>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { get_no_list, add } from "@/api/hui_kuan/index.js";
import { get_userlist } from "@/api/user/get_list.js";

export default {
  name: "huikuan_not",
  data() {
    return {
      time: "",
      price: "",
      table_loading: false,
      // 负责人名字
      fuze_name: "",
      // 配合人名字
      peihe_name: "",
      tishi_title: false,
      count: 0,
      rules: {
        company_name: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
        ],
        price: [{ required: true, message: "请输入金额", trigger: "blur" }],
        backmoney_time: [
          { required: true, message: "请输入回款时间", trigger: "blur" },
        ],
      },
      role: {
        company_name: "",
        price: "",
        statement_id: "",
        backmoney_time: "",
        backmoney_num: "",
        remark: "",
      },
      rolesList: [],
      dialogVisible: false,
      dialogType: "new",
      checkStrictly: false,
      req_xin_xi: {
        page: 1,
        limit: 10,
        has_backmoney: 1,
        keyword: "",
        search_time: "",
        fuze_uid: "",
        peihe_uid: "",
      },
      options1: [],
      options2: [],
      loading: false,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {
    this.get_list();
  },
  methods: {
    //合同跳转
    lista_detail(val){
      this.$router.push({
        path:"/jiesuan/contract/detail",
        query:{
          contract_id:val.row.id
        }
      })
    },
    //跳转结算单
    list_detail(val){
      this.$router.push({
        path:"/jiesuan/jiesuan_list/detail",
        query:{
          statement_id:val.row.id
        }
      })
    },
    // 选择负责人
    change1(e) {
      this.req_xin_xi.fuze_uid = e;
    },
    // 选择配合人
    change2(e) {
      this.req_xin_xi.peihe_uid = e;
    },
    focus(){
      get_userlist({ keyword: '' }).then((res) => {
        this.loading = false;
        this.options1 = res.data;
      });
    },
    focus1(){
      get_userlist({ keyword: '' }).then((res) => {
        this.loading = false;
        this.options2 = res.data;
      });
    },
    // 刷新
    refresh() {
      this.peihe_name = "";
      this.time = ''
      this.fuze_name = "";
      this.req_xin_xi = {
        page: 1,
        limit: 10,
        has_backmoney: 0,
        keyword: "",
        search_time: "",
        fuze_uid: "",
        peihe_uid: "",
      };
      this.get_list();
    },
    // 获取数据
    get_list() {
      this.table_loading = true;
      get_no_list(this.req_xin_xi).then((res) => {
        this.table_loading = false;
        this.count = res.count;
        this.rolesList = res.data;
      });
    },
    handleEdit(scope) {
      this.price = scope.row.total_price;
      this.role.statement_id = scope.row.id;
      this.dialogVisible = true;
    },
    // 搜索
    search() {
      this.get_list();
    },
    // 翻页
    current_change(e) {
      this.req_xin_xi.page = e;
      this.get_list();
    },
    // 提交
    confirmRole() {
      this.$refs.from.validate((valid) => {
        if (valid){
          add(this.role).then((res) => {
            this.dialogVisible = false;
            this.tishi_title = false;
            this.$refs.from.resetFields();
            this.role = {
              company_name: "",
              price: "",
              statement_id: "",
              backmoney_time: "",
              backmoney_num: "",
              remark: "",
            };
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.get_list()
          });
        } else {

        }
      });
    },
    size_change(e) {
      this.req_xin_xi.limit = e;
      this.get_list();
    },
    select_time(e) {
      this.req_xin_xi.search_time = e.join(",");
    },
    // 金额输入事件
    price_input(e) {
      if (Number(e) > Number(this.price)) {
        this.tishi_title = true;
      } else {
        this.tishi_title = false;
      }
    },
    // 弹框取消
    quxiao() {
      this.dialogVisible = false;
      this.tishi_title = false;
      this.$refs.from.resetFields();
      this.role = {
        company_name: "",
        price: "",
        statement_id: "",
        backmoney_time: "",
        backmoney_num: "",
        remark: "",
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 30px;
  }
}

.del {
  margin: 0;
}

.header {
  display: flex;
}

.title_search {
  display: flex;
  width: 202px;
  align-items: center;
}

// 翻页组件居中
.pages {
  display: flex;
  padding-top: 20px;
}
.search_time {
  width: 240px;
}
.cao_zuo {
  display: flex;
  justify-content: center;
}
</style>
